<template>
  <div id="app">
    <Head>快速求职</Head>
    <div class="img"></div>
    <div class="centent">
      <div class="title">{{ info.wantjob }}</div>
      <div class="num">
        <div class="look">浏览：{{ info.click }}次</div>
        <div class="time">{{ info.refreshtime_cn }}</div>
      </div>
      <div class="title">基本信息</div>
      <div class="info">
        <div class="contact">
          <div>姓名：{{ info.fullname }}</div>
          <div>性别：{{ info.sex == 2 ? '女' : '男' }}</div>
          <div>工作年限：{{ info.experience_text }}经验</div>
        </div>
        <div class="call" v-if="show_contact" @click.stop="contactHim(info.telephone)">
          <img src="../../assets/images/fast/icon_call.png"/>
          <div>立即拨号</div>
        </div>
      </div>
      <div class="contactcall">联系电话：<span v-if="!show_contact" @click.stop="showLogin = true">登录查看联系方式</span><strong
        v-if="show_contact">{{ info.telephone }}</strong></div>
      <div class="title">具体描述</div>
      <div class="describe">
        {{ info.content }}
      </div>
      <div class="title">管理信息</div>
      <div class="tisp">只有发布者本人才可以操作</div>
      <div class="btndiv">
        <div class="btn Refresh" @click="refresh">刷新</div>
        <div class="btn modify" @click="modify">修改</div>
        <div class="btn delete" @click="del">删除</div>
      </div>
    </div>
    <van-dialog v-model="showPwdPop" title="验证管理密码" show-cancel-button :before-close="beforeClose" @confirm="confirm">
      <div class="wap_line">
        <div class="wap_left">管理密码：</div>
        <div class="wap_right">
          <input name="mobile" v-model="pwd" id="diaLogMobile" type="number" placeholder="请输入添加时的密码" class="wap_input">
        </div>
      </div>
    </van-dialog>
    <van-popup
      v-model="showLogin"
      position="right"
      :overlay="false"
      style="width:100%;height:100%"
    >
      <Login
        :utype="2"
        :single_login="true"
        @afterLogin="afterLogin"
        :after_login_data="after_login_data"
        :goback_custom="true"
        @gobackCustomMethod="closeLogin"
      ></Login>
    </van-popup>
  </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'
import Login from '@/components/Login'
import wxshare from '@/assets/js/share.js'

export default {
  components: {
    Login
  },
  data() {
    return {
      showPwdPop: false,
      show_contact: false,
      id: '',
      type: '',
      pwd: '',
      info: {},
      showLogin: false,
      is_personal_login: false,
      after_login_data: {}
    }
  },
  created() {
    this.is_personal_login = this.$store.state.LoginOrNot === true
    if (this.$store.state.config.fast_resume_contact === '0') {
      this.show_contact = true
    } else {
      if (this.is_personal_login) {
        this.show_contact = true
      }
    }
    this.id = this.$route.params.id
    // 请求数据
    this.fetchData()
  },
  computed: {},
  methods: {
    refresh() {
      this.type = 'refresh'
      var that = this
      that.$dialog
        .confirm({
          title: '系统提示',
          message: '确定刷新该求职信息吗？',
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        })
        .then(() => {
          this.showPwdPop = true
        })
        .catch(() => {
        })
    },
    modify() {
      this.$router.push({
        path: '/fast/resumeedit',
        query: {
          id: this.id
        }
      })
    },
    beforeClose(action, done) {
      if (action === 'cancel') {
        this.enable_close_mobile = true
      }
      if (this.enable_close_mobile === true) {
        done()
      } else {
        done(false)
      }
    },
    confirm() {
      if (!this.pwd) {
        this.$notify('请填写管理密码')
        return false
      }
      http.post(api.fast_resumepwd, {id: this.id, adminpwd: this.pwd}).then(res => {
        if (res.code == 200) {
          this.showPwdPop = false
          if (this.type === 'refresh') {
            http.get(api.fast_resumerefresh, {id: this.id}).then(res => {
              this.$notify({
                type: 'success',
                message: res.message
              })
              this.fetchData()
            }).catch(() => {
            })
          } else if (this.type === 'del') {
            http.get(api.fast_resumedelete, {id: this.id}).then(res => {
              this.$notify({
                type: 'success',
                message: res.message
              })
              window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
            }).catch(() => {
            })
          }
        } else {
        }
      }).catch(() => {
      })
    },
    del() {
      this.type = 'del'
      var that = this
      that.$dialog
        .confirm({
          title: '系统提示',
          message: '确定删除该求职信息吗？',
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        })
        .then(() => {
          this.showPwdPop = true
        })
        .catch(() => {
        })
    },
    fetchData() {
      http.get(api.fast_resumedetail, {id: this.id}).then(res => {
        this.info = res.data

        let wechatShareInfo = {
          fullname: this.info.fullname,
          sex: this.info.sex == 2 ? '女' : '男',
          experience_text: this.info.experience_text + '经验'
        }
        wxshare(wechatShareInfo, 'fastResume', location.href)
      }).catch(() => {
      })
    },
    afterLogin(data) {
      this.showLogin = false
      this.is_personal_login = true
      this.show_contact = true
      let method = null
      if (data.method !== undefined) {
        method = data.method
      }
      this.fetchData(method)
    },
    closeLogin() {
      this.showLogin = false
    },
    contactHim(phone) {
      location.href = `tel:${phone}`
    }
  }
}
</script>
<style lang="scss" scoped>
.img {
  width: 100vw;
  height: 121px;
  background: url("../../assets/images/fast/fastdetail_bg.png") 0 0 no-repeat;
  background-size: 100vw 121px;
}

.centent {
  width: 100vw;
  font-size: 15px;
  color: #666666;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background-color: #FFFFFF;
  position: absolute;
  top: 105px;

  .title {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px;
    font-size: 18px;
    color: #333333;
    line-height: 1.8;
    font-weight: bold;
  }

  .num {
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    font-size: 12px;
    color: #666666;
    position: relative;

    .time {
      position: absolute;
      right: 15px;
    }
  }

  .info {
    margin-left: 15px;
    margin-right: 15px;
    display: flex;
    position: relative;

    .contact {
      div {
        margin-top: 11px;
      }
    }

    .call {
      position: absolute;
      right: 0;
      text-align: center;
      font-size: 13px;

      img {
        width: 39px;
        height: 39px;
      }
    }
  }

  .contactcall {
    margin-top: 11px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;

    span {
      color: #ff6d01;
    }

    strong {
      color: #ff2222;
    }
  }

  .describe {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
    line-height: 1.8;
    margin-top: 11px;
    border-bottom: 1px solid #e0e0e0;
  }

  .tisp {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .btndiv {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;

    .btn {
      width: 100px;
      height: 36px;
      font-size: 15px;
      color: #FFFFFF;
      border-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      &.Refresh {
        background-color: #518eff;
      }

      &.modify {
        margin-left: 18px;
        margin-right: 18px;
        background-color: #25c68b;
      }

      &.delete {
        background-color: #ff7575;
      }
    }
  }
}

.wap_line {
  width: 85%;
  margin: 0 auto;
  padding: 25px 0;
  font-size: 13px;
  display: flex;
  color: #666666;

  .wap_right {
    width: 200px;
    margin-left: 5px;
    color: #333;
    border-bottom: 1PX solid #e2e2e2;

    .wap_input {
      border: 0;
      width: 100%;
      padding: 0px 0 12px 3px;
      font-size: 13px;

      &::placeholder {
        color: #bcbcbc;
        font-size: 13px;
      }
    }
  }
}
</style>
